<template>
  <div class="l-wrap">
    <div class="l-cut-line"></div>
    <header>
      <aside class="l-details-tittle">门牌信息</aside>
      <div class="l-cause-pic">
        <div>
          <span>出险日期 :</span><p>{{mudally.outPolicyDate}}</p>
        </div>
        <div>
          <span>出险原因 :</span><p>{{mudally.outPolicyReason}}</p>
        </div>
        <div>
          <span>出险地点 :</span><p>{{mudally.outPolicyPlace}}</p>
        </div>
        <div>
          <span>门牌照片 :</span>
          <figure>
                <img v-for="(img,index) in housePhotos" v-preview="img.large" :src="img.url" :key="index" preview-title-enable="true" preview-nav-enable="true">
          </figure>
        </div>
      </div>
    </header>
      <section>
          <div class="l-note-txt">
              <span>备注信息:</span>
              <p>{{mudally.noteText}}</p>
          </div>
          <div class="l-cut-line"></div>
          <div class="l-site-pic">
              <span>现场图片:</span>
              <div class="l-bscroll" ref="bscroll">
                <div class="l-bscroll-container" ref='bscontent' id="l-scence-pic">
                    <img class="wc-preview-img" v-for="(url, key) in mudally.xianchangImage" :src="url.imageThumbPath" :key="key" @click="$preview($event, mudally.xianchangImage, key,'imagePath')">
                </div>
              </div>
          </div>
          <div class="l-cut-line"></div>
          <div class="l-damaged-type">
              <div class="l-damaged-slider" v-for="(it2,ind2) in mudally.shousunList" :key="ind2">
                <div class="l-damaged-tittle">
                  <span>受损标的 : </span><span>{{it2.type}}</span>
                </div>
                  <div class="l-slider-type" v-if="it2.type == '房屋倒损'">
                    <div class="l-slide-scroll" ref="sscrtype" v-if="it2.image.length>0">
                        <div class="l-slide-img" ref='slscrollc' :id="'l-home-pic'+ind2">
                            <img class="wc-preview-img" :src="url.imageThumbPath" v-for="(url, key) in it2.image" :key="key" @click="$preview($event, it2.image, key,'imagePath')">
                        </div>
                    </div>
                    <div class="l-slide-table">
                        <table>
                            <thead>
                                <tr>
                                    <th>项目</th>
                                    <th>数量</th>
                                    <th>金额</th>
                                </tr>
                            </thead>
                            <tbody>
                              <tr v-for="(it3,id3) in it2.projectinfo">
                                <td>{{it3.number}}</td>
                                <td>{{it3.money}}</td>
                                <td>{{it3.proname}}</td>
                              </tr>
                            </tbody>
                        </table>
                    </div>
                  </div>
                  <div class="l-slider-type" v-if="it2.type == '室内财产损失'">
                      <div class="slide-child" v-for="(it4,ind4) in it2.snssItem" :key="ind4" v-if="it4.image.length>0||it4.projectinfo.length>0">
                          <div class="l-damaged-tittle" style="width:90%;margin:0 auto;">
                            <span></span><span style="font-size:12px;">--{{it4.childtype}}</span>
                          </div>
                          <div class="l-slide-scroll">
                            <div class="l-slide-img" :id="'l-scence-pic'+ind4">
                                <img class="wc-preview-img" :src="url.imageThumbPath" v-for="(url, key) in it4.image" :key="key" @click="$preview($event, it4.image, key,'imagePath')">
                            </div>
                          </div>
                          <div class="l-noimg" v-if="it4.image.length<=0">
                            暂无图片
                          </div>
                         <div class="l-slide-table" v-if="it4.projectinfo.length>0">
                          <table>
                              <thead>
                                  <tr>
                                      <th>项目</th>
                                      <th>数量</th>
                                      <th>金额</th>
                                  </tr>
                              </thead>
                              <tbody>
                                <tr v-for="(it4,id4) in it2.projectinfo">
                                  <td>{{it4.number}}</td>
                                  <td>{{it4.money}}</td>
                                  <td>{{it4.proname}}</td>
                                </tr>
                              </tbody>
                          </table>
                        </div>
                      </div>
                  </div>
                  <div class="l-slider-type" v-if="it2.type == '人员损失'">
                      <div class="l-slide-man" v-for="(it5,ind5) in it2.ryssItem" :key="ind5">
                          <div class="l-slide-scroll"  v-if="it5.image.length>0">
                              <div class="l-slide-img" :id="'l-man-pic'+ind5">
                                  <img class="wc-preview-img" :src="url.imageThumbPath" v-for="(url, key) in it5.image" :key="key" @click="$preview($event, it5.image, key,'imagePath')">
                              </div>
                          </div>
                           <div class="l-noimg" v-if="it5.image.length<=0">
                            暂无图片
                          </div>
                          <div class="l-slide-table" v-if="it5.projectinfo.length>0">
                          <table>
                              <thead>
                                  <tr>
                                      <th>受灾人员类别</th>
                                      <th>损伤等级</th>
                                      <th>损失金额</th>
                                      <th>损失情况</th>
                                  </tr>
                              </thead>
                              <tbody>
                                <tr v-for="(it6,id6) in it5.projectinfo">
                                  <td>{{it6.proname}}</td>
                                  <td>{{it6.level}}</td>
                                  <td>{{it6.money}}</td>
                                  <td>{{it6.number}}</td>
                                </tr>
                              </tbody>
                          </table>
                        </div>
                      </div>
                  </div>
                <div class="l-cut-line"></div>
              </div>
          </div>
      </section>
      <footer>
        <aside class="l-disaster-msg">受灾户信息</aside>
        <div class="l-identity">
            <dl>
              <dt>
                <figure>
                  <img v-for="(img,index) in signPic" v-preview="img.large" :src="img.url" :key="index" preview-title-enable="true" preview-nav-enable="true">
                </figure>
              </dt> 
              <dd>
                <aside>灾户姓名 : <span>{{mudally.szhName}}</span></aside>
                <aside>身份证号： <span>{{mudally.szhIdcard}}</span></aside>
              </dd>
            </dl>
        </div>
        <div class="l-home-type">
          <span>受灾户房屋权属类型 :</span>
          <span>{{mudally.szhouseType}}</span>
        </div>
         <div class="l-materials-txtpic">
              <p>提供材料:</p>
              <div class="l-materials-box" ref="materialsb">
                <div class="l-materials-content" ref="materialsc" id="l-materials">
                  <dl v-for="(it1,ind) in mudally.szhziliao" :key="ind">
                    <dt> <img class="wc-preview-img" :src="it1.imageThumbPath" @click="$preview($event, mudally.szhziliao, ind,'imagePath')"></dt>                
                    <dd>{{it1.type}}</dd>
                  </dl>
                </div>
              </div>
          </div>
          <div class="l-msg-foot">
              <aside>受灾户信息</aside>
              <ul>
                  <li><span>姓名:</span><span>{{mudally.lkrName}}</span></li>
                  <li><span>开户银行:</span><span>{{mudally.lkrbankname}}</span></li>
                  <li><span>银行账户:</span><span>{{mudally.lkrbankno}}</span></li>
                  <li><span>身份证号:</span><span>{{mudally.lkrIdcard}}</span></li>
                  <li><span>联系电话:</span><span>{{mudally.lkrtel}}</span></li>
              </ul>
          </div>
           <div class="l-cut-line"></div>
          <div class="l-spacing">
             <aside class="l-details-tittle">签字信息</aside>
             <div><span>定损确认书:</span><p>{{mudally.szhQuerennote}}</p></div>
             <div><span>损失金额合计:</span><span>{{mudally.totalInvestMoney}}</span></div>
             <div><span>签字图片:</span>
                <figure>
                  <img v-for="(img,index) in sigres" v-preview="img.large" :src="img.url" :key="index" preview-title-enable="true" preview-nav-enable="true">
                </figure> 
             </div>
          </div>
      </footer>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
  name: 'detailsBox',
  data () {
    return {
      msg: '',
      sliShow:false,
      aBScroll:"",
      mudally:{},
      housePhotos: [],
      sigres:[],
      signPic:[]
    }
  },
  created(){
    this.getData();
    this.$previewRefresh({
      allowPanToNext:true
    });
  },
  methods:{
      getData(){
        let parms = {};
        // parms.token = this.getParms("token");
        // parms.taskId = this.getParms("taskId");
        parms.token = "97fcf25ff58341e68bb6eb9d347c28b4";
        parms.taskId = "06559fd982254de395c8fdb954cc26c5";
        parms.method = "taskDetail";
        this.axios.post('/imp',parms).then((res)=>{
          if(res.data.code == "200"){
              this.mudally = res.data;
              this.housePhotos.push({url:res.data.doorImagePath.imageThumbPath,large:res.data.doorImagePath.imagePath});
              this.sigres.push({url:res.data.szhSignpic.imageThumbPath,large:res.data.szhSignpic.imagePath});
              this.signPic.push({url:res.data.szhIdcardImg.imageThumbPath,large:res.data.szhIdcardImg.imagePath});
              this.InitScroll();
              console.log(res.data);
          }else{
            console.log("请求详情出错了，去看看为啥");
          }
        })
      },
      getParms(name){
        let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
        if(r!=null)
          return unescape(r[2]);
          return null;
        },
      InitScroll(){
           this.$nextTick(() => {
              console.log(this.$refs.bscontent.childNodes);
              let scen = document.getElementById("l-scence-pic");
              let materials = document.getElementById("l-materials");
              let scenWid = scen.clientWidth;
              let scenLen = this.mudally.xianchangImage.length;//现场图片
              let materialsLen = this.mudally.szhziliao.length;//提供资料
              scen.style.width = scenWid*scenLen/100 + "rem";//现场图片
              materials.style.width = scenWid*materialsLen/100 + "rem";//材料图片
              this.mudally.shousunList.forEach((item,index)=>{
                if(item.image != undefined){ 
                  let mesgra = document.getElementById("l-home-pic"+index);
                   let iteLen = item.image.length;
                   mesgra.style.width = scenWid * iteLen/100 + "rem";
                }
                if(item.snssItem != undefined){
                  item.snssItem.forEach((url,inds)=>{
                    if(url.image.length != 0||url.projectinfo.length != 0){
                      let mesgra = document.getElementById("l-scence-pic"+inds);
                      let iteLen = url.image.length;
                      mesgra.style.width = scenWid * iteLen/100 + "rem";
                    }
                  })
                }
                if(item.ryssItem != undefined && item.ryssItem.length != 0){
                  item.ryssItem.forEach((furniture,ind)=>{
                    let mesgra = document.getElementById("l-man-pic"+ind);
                    let iteLen = furniture.image.length;
                    mesgra.style.width = scenWid * iteLen/100 + "rem";
                  })
                }
              })

              let bscrollDom = this.$refs.bscroll;
              this.aBScroll = new BScroll(bscrollDom,{
                scrollX: true,
                eventPassthrough: 'vertical'
              })

              let materialsb = this.$refs.materialsb;
              this.aBScroll = new BScroll(materialsb,{
                scrollX: true,
                eventPassthrough: 'vertical'
              })
          })   
      } 
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @mixin size{
    font-size:37px;
  }
  @mixin widhei{
    width:100%;
    height:100%;
  }
  .l-wrap{
    header{
        width:100%;
        height:auto;
        background: #FFF;
        padding:20px 0;
        .l-cause-pic{
          width:98%;
          margin:0 auto;
          >div{
            width:100%;
            height:60px;
            margin-top:8px;
            @include size;
            p{
              width:75%;
              height:80%;
              margin-left:17px;
              display:inline-block;
              border-bottom:1px solid #ccc;
              color:#ee7155;
            }
          }
          >div:nth-child(4){
             height:auto;
              position: relative;
              figure{
                width:70%;
                border:none;
                margin-left:20%;
                display:inline-block;
                img{
                  width:100%;
                  height:auto;
                  border-radius:4px;
                }
              }
          }
      }
    }
    section{
      width:100%;
      background:#FFF;
      margin-top:25px;
      .l-note-txt{
        width:96%;
        height:auto;
        @include size;
        position:relative;
        padding:14px 0;
        span{
          margin-left:15px;
          margin-top:20px;
          position:absolute;
          top:8px;
        }
        p{
          width:80%;
          height:auto;
          overflow-y:auto;
          display:inline-block;
          margin-top:20px;
          margin-left:190px;
          color:#ee7155;
          font-size:32px;
        }
      }
      .l-site-pic{
        width:100%;
        span{
          margin-left:15px;
          margin-top:22px;
          font-size:40px;
          display:inline-block;
        }
        .l-bscroll{
          width:100%;
          height:300px;
           margin-top:20px;
           overflow:hidden;
           margin-bottom:20px;
          .l-bscroll-container{
            overflow:hidden;
          }
          img{
            width:300px;
            height:300px;
            margin-left:20px;
            float:left;
          }
        }
      }
      .l-damaged-type{
        width:100%;
        .l-damaged-slider{
            width:100%;
            .l-damaged-tittle{
              width:100%;
              height:60px;
              line-height:60px;
              border-bottom:2px dashed #ccc;
              span{
                display:inline-block;
                text-indent:20px;
              }
              span:nth-child(2){
                color:#ee7155;
              }
            }
            .l-slide-scroll{
              width:100%;
              height:300px;
              margin-top:30px;
              overflow-x:auto;
              >div{
                overflow-x:hidden;
                img{
                   width:300px;
                  height:300px;
                  margin-left:20px;
                  float:left;
                }
              }
            }
            .l-slide-table{
              width:100%;
              margin-top:40px;
              padding-bottom:20px;
              table{
                  width:100%;
                  thead{
                      width:100%;
                      tr{
                          // @include size;
                          font-size: 28px;
                          width:100%;
                          th{
                              height:70px;
                              color:#EE7155 !important;
                              border-bottom:1px solid #ccc;
                          }
                      }
                  }
                  tbody{
                      width:100%;
                      tr{
                          font-size:30px;
                          width:100%;
                          td{
                            text-align:center;
                              height:60px;
                              color:#979696;
                          }
                      }
                  }
              }
          }
          .l-slide-man{
            margin-top:50px;
          }
        }
      }
      .l-noimg{
            width:100%;
            height:200px;
            margin:0 auto;
            margin:20px 0;
            text-align:center;
            background:#eee;
            line-height:200px;
            color:#666;
      }
    }
    footer{
      width:100%;
      height:auto;
      background:#FFF;
      padding-bottom:50px;
      .l-disaster-msg{
        width:100%;
        height:130px;
        font-size:48px;
        color:#333;
        line-height:140px;
        text-indent: 15px;
        border-bottom:1px solid #ccc;
        display:inline-block;
      }
      .l-identity{
        width:96%;
        margin:0 auto;
        margin-top:36px;
        dl{
          width:100%;
          display:flex;
          dt{
            width:40%;
            height:220px;
            float:left;
            img{
              @include widhei;
            }
          }
          dd{
            float:left;
            margin-left:20px;
            aside{
              font-size:32px;
              margin-top:40px;
              span{
                color:#ee7155;
              }
            }
          }
        }
      }
      .l-home-type{
        width:100%;
        height:40px;
        margin:25px 0px;
        span{
          font-size:39px;
          margin-left:24px;
        }
        span:nth-child(2){
          color:#ee7155;
        }
      }
      .l-materials-txtpic{
        p{
            font-size:40px;
            text-indent:15px;
            margin-top:60px;
        }
        .l-materials-box{
          height:370px;
          overflow:auto;
          margin:0 auto;
          margin-top:40px;
          .l-materials-content{
            overflow-x:auto;
            dl{
              float:left;
              margin-left:20px;
              dt{
                width:300px;
                height:300px;
                img{
                  @include widhei;
                }
              }
              dd{
                width:300px;
                text-align:center;
                margin-top:20px;
              }
            }
          }
        }
    }
      .l-msg-foot{
        width:100%;
        @include size;
        margin-top:40px;
        padding-bottom:40px;
        aside{
            width:100%;
            height:60px;
            line-height:40px;
            font-weight: bold;
            text-indent:30px;
            border-bottom:1px solid #ccc;
          }
          ul{
              width:96%;
              margin:0 auto;
              li{
                  width:100%;
                  margin-top:30px;
                  >span:nth-child(1){
                      display: inline-block;
                      width:23%;
                      letter-spacing:2px;
                  }
                  >span:nth-child(2){
                      display: inline-block;
                      width:60%;
                      margin-left:3%;
                      border-bottom:1px solid #ccc;
                      text-align: center;
                      letter-spacing:1px;
                      color:#ee7155;
                  }
              }
          }
      }
      .l-spacing{
        width:100%;
        >div{
          width:96%;
          margin:0 auto;
          margin-top:25px;
          span{
            width:28%;
            display:inline-block;
            letter-spacing: 0.03rem;
          }
          &:nth-child(2){
            p{
                width:96%;
                color: #ee7155;
                margin:10px auto;
            }
          }
          &:nth-child(3){
            span:nth-child(2){
              color: #ee7155;
              margin-left:15px;
            }
          }
          &:nth-child(4){
            display:flex;
            figure{
              width:50%;
              height:auto;
              margin-left:20px;
            }
          }
        }
      }
    }
    .l-cut-line{
        width:100%;
        height: 32px;
        background:#ececec;
    }
    .l-details-tittle{
      width:100%;
      color: #333;
      font-size:48px;
      height: 1.2rem;
      text-indent:15px;
      line-height: 1.4rem;
      display: inline-block;
      border-bottom:1px solid #ccc;
    }
}
</style>
